/*
 * @Author: Wilbur
 * @Date: 2018-11-17 16:39:52
 * @Last Modified by: Wilbur
 * @Last Modified time: 2018-12-08 14:32:20
 */
<template>
    <div class="container user-list-container">
        <div class="operation-wrapper">
            <!-- <el-button
                type="primary"
                size="small">导出数据</el-button> -->
            <el-button
                @click="handleRoute('AddAcademy')"
                type="primary"
                size="small">新增学院</el-button>
        </div>
        <div class="content-wrapper">
            <el-row
                class="search-wrapper"
                :gutter="20">
                <el-form
                    label-position="left"
                    label-width="84px"
                    size="small">
                    <el-col
                        class="filter-item"
                        :md="{ span: 6 }"
                        :sm="{ span: 12 }">
                        <el-form-item label="选择城市：">
                            <el-select
                                v-model="city_id"
                                filterable
                                @change="fnCityChange"
                                placeholder="请选择">
                                <el-option
                                    v-for="item in cityList"
                                    :key="item.city_id"
                                    :label="item.name"
                                    :value="item.city_id"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col
                        class="filter-item"
                        :md="{ span: 6 }"
                        :sm="{ span: 12 }">
                        <el-form-item label="选择学校：">
                            <el-select
                                v-model="school_id"
                                filterable
                                @change="getTableData(1)"
                                placeholder="请选择">
                                <el-option
                                    v-for="item in schoolList"
                                    :key="item.school_id"
                                    :label="item.name"
                                    :value="item.school_id"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <!-- <el-col
                        class="filter-item"
                        :md="{ span: 6 }"
                        :sm="{ span: 12 }">
                        <el-button
                            size="small"
                            type="primary"
                            @click="getTableData">搜索</el-button>
                    </el-col> -->
                </el-form>
            </el-row>
            <div class="table-wrapper">
                <el-table
                    :data="academyData"
                    height="100%"
                    style="width: 100%;">
                    <el-table-column
                        fixed="left"
                        header-align="left"
                        align="center"
                        :width="50"
                        label="序号">
                        <template slot-scope="scope">
                            <div class="table-index">
                                {{ scope.$index + 1 }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        fixed="left"
                        prop="academy_no"
                        min-width="150"
                        label="学院编号"/>
                    <el-table-column
                        prop="school_name"
                        min-width="150"
                        label="学校"/>
                    <el-table-column
                        :formatter="emptyFormatter"
                        prop="academy_name"
                        show-overflow-tooltip
                        :min-width="100"
                        label="学院" />
                    <el-table-column
                        prop="date"
                        label="操作"
                        fixed="right"
                        width="150">
                        <template slot-scope="scope">
                            <div>
                                <el-button
                                    type="text"
                                    @click="fnEditAcademy(scope.row.academy_no, scope.row.academy_name)">编辑</el-button><el-button
                                        type="text"
                                        @click="fnDelAcademy(scope.row.academy_no)"
                                        class="academy-del">删除</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pagination-wrapper clearfix">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page="page.now_page"
                    :total="page.total_count"
                    :page-size="page.page_size"
                    @current-change="getTableData" />
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            city_id: '',
            school_id: '',
            cityList:[],
            schoolList: [],
            authResult: {},
            academyData: [],
            filterData: {
                user_no: '',
                nickname: '',
                phone: '',
                task_title: ''
            },
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 0
            }
        };
    },
    created() {
        this.authResult = this.$route.meta.authResult;
        this.$store.commit('SET_HEADER', [
            {
                title: "任务反馈系统",
            },
            {
                title: "学院管理"
            }
        ]);
        this.getTableData();
        this.getCityList();
    },
    methods: {
        /**
         * 跳转页面
         */
        handleRoute(name, query) {
            let obj = {
                name
            };

            if (query) {
                obj.query = query;
            }

            this.$router.push(obj);
        },
        /**
         * 获取表格数据
         */
        getTableData(page) {
            this.$post('/task/base_academy%5Clist', {
                city_id: this.city_id,
                school_id: this.school_id,
                page: page || this.page.now_page
            }, resp => {
                if (resp.code == 1) {
                    this.academyData = resp.data.list;
                    this.page = resp.data.page;
                }
            });
        },
        /**
         * 获取城市列表
         */
        getCityList() {
            this.$post('/task/base_city%5Cget_simple_list', {
            }, resp => {
                if (resp.code == 1) {
                    this.cityList = resp.data.list;
                }
            });
        },
        /**
         * 获取学校列表
         */
        getSchoolList() {
            this.$post('/task/base_school%5Cget_simple_list', {
                city_id: this.city_id
            }, resp => {
                if (resp.code == 1) {
                    this.schoolList = resp.data.list;
                }
            });
        },
        /**
         * 更改城市
         */
        fnCityChange() {
            this.school_id = '';
            this.getTableData(1);
            this.getSchoolList();
        },
        /**
         * 删除学院
         */
        fnDelAcademy(academy_no) {
            this.$confirm('此操作将删除该学院, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$post('/task/base_academy%5Cdelete', {
                    academy_no: academy_no
                }, resp => {
                    if (resp.code == 1) {
                        // 在列表中删除
                        for(let i = 0; i < this.academyData.length; i++) {
                            if(this.academyData[i].academy_no == academy_no) {
                                this.academyData.splice(i, 1);
                            }
                        }
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    }else{
                        this.$message({
                            type: 'warning',
                            message: resp.msg
                        });
                    }
                });
            }).catch(() => {
                console.log('cancel');
            });
        },
        /**
         * 编辑学院名称
         */
        fnEditAcademy(academy_no, academy_name) {
            this.$prompt('', '编辑学院名称', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputValue: academy_name,
                inputValidator: function(val) {
                    if(!val) {
                        return '学院名称不能为空';
                    }
                }
            }).then(({ value }) => {
                this.$post('/task/base_academy%5Csave', {
                    academy_no: academy_no,
                    academy_name: value
                }, resp => {
                    if (resp.code == 1) {
                        for(let i = 0; i < this.academyData.length; i++) {
                            if(this.academyData[i].academy_no == academy_no) {
                                this.academyData[i].academy_name = value;
                            }
                        }
                        this.$message({
                            type: 'success',
                            message: '操作成功'
                        });
                    }else{
                        this.$message({
                            type: 'warning',
                            message: resp.msg
                        });
                    }
                });

            }).catch(() => {
                console.log('cancel');
            });
        },
        /**
         * 列表渲染辅助函数：列表项为空处理
         */
        emptyFormatter(row, column, val) {
            if (!val) {
                return '--';
            }
            return val;
        },
    }
};
</script>

<style lang="less" scoped>
.container {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.academy-del{
    color: #F56C6C;
}
.operation-wrapper {
    display: flex;
    flex-direction: row-reverse;
    padding: 12px 23px;
    background-color: #fff;

    .el-button {
        margin-left: 10px;
    }
}
.content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 15px;
    overflow: hidden;
}
.search-wrapper {
    padding: 15px;
    background-color: #fff;
}
.filter-item {
    margin-bottom: 15px;
    .el-form-item {
        margin-bottom: 0;
    }
    .el-autocomplete {
        width: 100%;
    }
}
.table-wrapper {
    flex: 1;
    background-color: #fff;

    .el-button {
        padding: 0;
    }

    .btn-delete {
        color: #fd4d32;
        &.is-disabled {
            color: #c0c4cc;
            cursor: not-allowed;
        }
    }
}
.pagination-wrapper {
    padding-top: 10px;
    .el-pagination {
        float: right;
        padding: 0;
        background-color: transparent;
    }
}
</style>